<template>
  <view class="page">
    <view class="left-menu" :style="{flex: '0 0 33.33%'}">
      <uni-list>
        <uni-list-item
          v-for="item in leftMenuItems"
          :key="item.id"
          :class="{active: selectedItem === item}"
          @click="selectMenuItem(item)"
        >
          <view class="menu-item">
            <text>{{ item.title }}</text>
          </view>
        </uni-list-item>
      </uni-list>
    </view>
	<view class="right-content" :style="{flex: '1'}">
      <uni-list>
        <uni-list-item
          v-for="subItem in currentRightContentItems"
          :key="subItem.id"
          :class="{active: selectedSubItem === subItem.id}"
		  @tap="navigateToCategoryList(subItem)"
        >
          <view class="content-item">
            <image :src="subItem.icon" mode="aspectFit"></image>
            <text>{{ subItem.title }}</text>
          </view>
        </uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';

// 模拟的根节点数据
const generateTestData = () => {
  const testData = [];

  // 生成20个根节点
  for (let i = 1; i <= 15; i++) {
    testData.push({
      id: `${i}`, // 使用字符串类型，便于后续处理
      title: `Root ${i}`,
      parentId: '',
      children: []
    });

    // 为每个根节点生成5个子节点
    for (let j = 1; j <= 5; j++) {
      testData[i - 1].children.push({
        id: `${i}${j}`, // 子节点的ID，例如 '11', '12', ..., '205'
        title: `Child ${i}.${j}`,
        parentId: `${i}`, // 父节点的ID
        icon: `icon${j}.png` // 示例图标文件名
      });
    }
  }

  return testData;
};

// 初始化左侧菜单项
const leftMenuItems = ref([]);
// 初始化右侧内容项
const rightContentItems = ref({});
// 当前选中的菜单项
const selectedItem = ref(null);
// 当前选中的子菜单项
const selectedSubItem = ref(null);
const router = useRouter();

// 更新左侧菜单项
function updateLeftMenuItems(nodes) {
  leftMenuItems.value = nodes.filter(node => !node.parentId);
  nodes.forEach(node => {
    if (node.parentId) {
      const parent = leftMenuItems.value.find(item => item.id === node.parentId);
      if (parent) {
        if (!parent.children) parent.children = [];
        parent.children.push(node);
      }
    }
  });
}

// 选择菜单项
function selectMenuItem(item) {
  selectedItem.value = item;
  if (item.children) {
    rightContentItems.value[item.id] = item.children;
  }
}

// 计算右侧内容
const currentRightContentItems = computed(() => {
  return rightContentItems.value[selectedItem.value?.id] || [];
});

// 初始化数据
const rootNodes = ref(generateTestData());
updateLeftMenuItems(rootNodes.value);

// 初始化数据
onMounted(() => {
  // 调用 generateTestData 生成数据
  rootNodes.value = generateTestData();
  updateLeftMenuItems(rootNodes.value);
})

// 导航到 category_list.vue
function navigateToCategoryList(subItem) {
      // 使用 uni.navigateTo 方法导航到子页面，并传递参数
      uni.navigateTo({
        url: '/pages/category/category_list?title=${encodeURIComponent(subItem.title)}&otherParam=${encodeURIComponent(subItem.otherParam)}'
      });
}

</script>

<style scoped>
.page {
  display: flex;
  height: 100%;
}

.left-menu {
  background-color: #f8f8f8;
  overflow-y: auto; /* 如果内容超过高度则显示滚动条 */
}

.right-content {
  padding: 20rpx;
  overflow-y: auto; /* 如果内容超过高度则显示滚动条 */
}

.menu-item {
  padding: 20rpx;
}

.active {
  background-color: #ddd;
}

.content-item {
  display: flex;
  align-items: center;
  padding: 10rpx;
}

.navigator-hover {
  background-color: #ddd;
}

.content-item image {
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
}
</style>